<template class="firstpage">
  <div>
    <div id="attr_mappings" class="boxMargin">
      <el-form ref="customData" :model="customData" label-width="200px" class="demo-ruleForm" label-position="left">
        <el-collapse v-model="customData.activeNames" @change="handleChange">
          <el-collapse-item v-for="(item, g_index) in customData.groupList" :key="g_index" :name="item.groupId">
            <template slot="title">
              <div style="font-size:15px;font-weight:bold;">
                <span v-if="item.xingModel" style="color:red;">*</span>
                <span>{{ item.groupName }}</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col v-for="(dataValue, index) in item.attrList" :key="index" :span="10" style="margin-bottom:20px;">
                <div v-if="dataValue.editType === 0">
                  <el-form-item v-if="dataValue.valueType === 1" :label="dataValue.attrAliasName" :required="dataValue.isMustEnter===1? true:false">
                    <el-form-item :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.textAttrValueCname':''" :rules="dataValue.isMustEnter===1?[{ required: true, message: '请填写'+ dataValue.attrAliasName + '中文', trigger: 'blur' }]:[]">
                      <el-input v-model="dataValue.textAttrValueCname" class="w70" placeholder="中文" @keyup.native="getVal(dataValue)" />
                      <span style="color:#cecece;font-size:13px;">{{ dataValue.application }}</span>
                    </el-form-item>
                  </el-form-item>
                  <el-form-item v-else id="textAttrValue" :label="dataValue.attrAliasName" :required="dataValue.isMustEnter===1? true:false">
                    <el-form-item :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.textAttrValueCname':''" :rules="dataValue.isMustEnter===1?[{ required: true, message: '请填写'+ dataValue.attrAliasName + '中文', trigger: 'blur' }]:[]">
                      <el-input v-model="dataValue.textAttrValueCname" class="w70" placeholder="中文" @keyup.native="getVal(dataValue)" />
                      <span style="color:#cecece;font-size:13px;">{{ dataValue.application }}</span>
                    </el-form-item>
                  </el-form-item>
                </div>
                <el-form-item v-else-if="dataValue.editType === 1" :label="dataValue.attrAliasName" :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.dropDownAttrValue':''" :rules="dataValue.isMustEnter===1?[{ required: true, message: '请选择'+ dataValue.attrAliasName, trigger: 'change' }]:[]">
                  <div>
                    <el-select v-model="dataValue.dropDownAttrValue" placeholder="请选择" clearable>
                      <el-option
                        v-for="data in dataValue.categoryAttributeValue"
                        :key="data.categoryAttrValueId"
                        :label="data.valueName"
                        :value="data.categoryAttrValueId"
                      />
                    </el-select>
                    <span style="color:#cecece;font-size:13px;">{{ dataValue.application }}</span>
                  </div>
                </el-form-item>
                <el-form-item v-else-if="dataValue.editType === 2" :label="dataValue.attrAliasName" :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.checkBoxAttrValue':''" :rules="dataValue.isMustEnter===1?[{ type: 'array', required: true, message: '请选择'+ dataValue.attrAliasName, trigger: 'change' }]:[]">
                  <div>
                    <el-checkbox-group v-model="dataValue.checkBoxAttrValue">
                      <el-checkbox v-for="x in dataValue.categoryAttributeValue" :key="x.categoryAttrValueId" :label="x.categoryAttrValueId">{{ x.valueName }}</el-checkbox>
                    </el-checkbox-group>
                    <span style="color:#cecece;font-size:13px;">{{ dataValue.application }}</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <el-row>
        <el-col :span="24" style="text-align: center;margin-top:20px;">
          <el-button type="success" @click="infoUpdate">保存</el-button>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="提示" :visible.sync="customData.checkModel" width="20%" center>
      <div style="font-size:15px;line-height: 30px;" v-html="customData.checkValue" />
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery'
import _validate from '../../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../../framework/commonJs/wptx_tools'
import _common from '../../../../../framework/commonJs/wptx_common'
import _api from '@/framework/API/generalItem'
const _FUNCTION_NAME = ''
export default {
  filters: {},
  data() {
    return {
      tableData: [],
      searchData: {
      },
      searchDataBuffer: {
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      customData: {
        activeNames: ['1'],
        groupList: [],
        categoryId: '',
        masterItemId: '',
        checkModel: false,
        checkValue: ''
      },
      form: {},
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    onInit(data) {
      const self = this
      self.customData.categoryId = sessionStorage.getItem('categoryId')
      self.customData.masterItemId = self.$route.query.itemId
      const params = {
        masterItemId: self.$route.query.itemId,
        categoryId: self.customData.categoryId
      }
      if (_validate.checkEmpty(sessionStorage.getItem('categoryId')) || sessionStorage.getItem('categoryId') == 'undefined') {
        _validate.openTip(self, '分类不能为空', 'warning')
        return
      }
      _api.queryCategoryAttr(self, params, self.callBack_queryCategoryAttr)
    },
    onSearch(data) {
      const self = this
    },
    onChangePage(data) {
      const self = this
    },
    onReset(data) {
      const self = this
    },
    onAdd(data) { },
    onDelete(data) {
      const self = this
    },
    onInfo(data) {
      const self = this
    },
    onUpdate(formName) {
      const self = this
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_queryCategoryAttr(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        self.customData.groupList = data.data.groupList
        for (let i = 0; i < self.customData.groupList.length; i++) {
          for (let x = 0; x < self.customData.groupList[i].attrList.length; x++) {
            // editType  0是文本框  1是单选  2是多选
            if (self.customData.groupList[i].attrList[x].editType === 0) {
              if (_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue)) {
                self.customData.groupList[i].attrList[x].attrValue = []
                self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', '')
              } else {
                if (_validate.checkEmpty(self.customData.groupList[i].attrList[x].attrValue[0])) {
                  self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', '')
                } else {
                  if (self.customData.groupList[i].attrList[x].attrValue[0].valueCname) {
                    self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', self.customData.groupList[i].attrList[x].attrValue[0].valueCname)
                  } else {
                    self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', '')
                  }
                }
              }
            } else if (self.customData.groupList[i].attrList[x].editType === 1) {
              if (_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue)) {
                self.customData.groupList[i].attrList[x].attrValue = []
                self.$set(self.customData.groupList[i].attrList[x], 'dropDownAttrValue', '')
              } else {
                let value = ''
                for (let y = 0; y < self.customData.groupList[i].attrList[x].categoryAttributeValue.length; y++) {
                  if (!_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue) && !_validate.checkEmpty(self.customData.groupList[i].attrList[x].attrValue[0])) {
                    if (self.customData.groupList[i].attrList[x].attrValue[0].masterCategoryAttrValueId == self.customData.groupList[i].attrList[x].categoryAttributeValue[y].categoryAttrValueId) {
                      value = self.customData.groupList[i].attrList[x].attrValue[0].masterCategoryAttrValueId
                    }
                  }
                }
                self.$set(self.customData.groupList[i].attrList[x], 'dropDownAttrValue', value)
              }
            } else if (self.customData.groupList[i].attrList[x].editType === 2) {
              if (_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue)) {
                self.customData.groupList[i].attrList[x].attrValue = []
                self.$set(self.customData.groupList[i].attrList[x], 'checkBoxAttrValue', [])
              } else {
                const num = []
                for (let z = 0; z < self.customData.groupList[i].attrList[x].attrValue.length; z++) {
                  num.push(self.customData.groupList[i].attrList[x].attrValue[z].masterCategoryAttrValueId)
                }
                self.$set(self.customData.groupList[i].attrList[x], 'checkBoxAttrValue', num)
              }
            }
          }
        }
        self.customData.activeNames = []
        for (let i = 0; i < self.customData.groupList.length; i++) {
          self.customData.activeNames.push(self.customData.groupList[i].groupId)
          let status = false
          for (let x = 0; x < self.customData.groupList[i].attrList.length; x++) {
            if (self.customData.groupList[i].attrList[x].isMustEnter === 1) {
              status = true
              break
            }
          }
          if (status) {
            self.$set(self.customData.groupList[i], 'xingModel', true)
          }
        }
      }
    },
    callBack_updateAttrValue(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        _validate.openTip(self, '保存成功', 'success')
        self.onInit()
      }
    },
    handleChange(val) {
    },
    infoUpdate() {
      const self = this
      self.$refs['customData'].validate((valid) => {
        if (valid) {
          const params = {
            masterItemId: self.customData.masterItemId,
            categoryId: self.customData.categoryId,
            groupAttrList: []
          }
          const list = []
          for (let i = 0; i < self.customData.groupList.length; i++) {
            const attrList = []
            for (let x = 0; x < self.customData.groupList[i].attrList.length; x++) {
              const attrValueList = []
              // editType  0是文本框  1是单选  2是多选
              if (self.customData.groupList[i].attrList[x].editType === 0) {
                attrValueList.push({
                  'valueCname': self.customData.groupList[i].attrList[x].textAttrValueCname
                })
              } else if (self.customData.groupList[i].attrList[x].editType === 1) {
                const value = self.customData.groupList[i].attrList[x].dropDownAttrValue
                if (!_validate.checkEmpty(value)) {
                  attrValueList.push({
                    'masterCategoryAttrValueId': self.customData.groupList[i].attrList[x].dropDownAttrValue
                  })
                }
              } else if (self.customData.groupList[i].attrList[x].editType === 2) {
                const checkValue = self.customData.groupList[i].attrList[x].checkBoxAttrValue
                for (let z = 0; z < self.customData.groupList[i].attrList[x].checkBoxAttrValue.length; z++) {
                  attrValueList.push({
                    'masterCategoryAttrValueId': self.customData.groupList[i].attrList[x].checkBoxAttrValue[z]
                  })
                }
              }
              attrList.push({
                'masterCategoryAttrId': self.customData.groupList[i].attrList[x].masterCategoryAttrId,
                'attrAliasName': self.customData.groupList[i].attrList[x].attrAliasName,
                'attrName': self.customData.groupList[i].attrList[x].attrName,
                'isMustEnter': self.customData.groupList[i].attrList[x].isMustEnter,
                'attrValueList': attrValueList
              })
            }
            list.push({
              'masterCategoryGroupId': self.customData.groupList[i].groupId,
              'attrList': attrList
            })
          }
          params.groupAttrList = list
          _api.updateAttrValue(self, params, self.callBack_updateAttrValue)
        } else {
          return false
        }
      })
    },
    getVal(val) {
      if (val.autoFill == 1) {
      }
    }
  }
}
</script>

<style scoped>
.w70{
    width: 70%;
    margin-bottom: 5px;
}
</style>
